<template>
	<view class="comment-item">
		<view class="avatar">
			<u-avatar :src="item.user_id[0]?.avatar_file?.url" size="30"></u-avatar>
		</view>
		<view class="del-btn" v-if="item.isShowDel">
			<text class="iconfont icon-shanchu1" @click.stop="delComment"></text>
		</view>
		<view class="wrap">
			<view class="name">
				<text>{{ item.user_id[0]?.nickname || item.user_id[0]?.username }}</text>
			</view>
			<view class="comment-content">
				<text>{{ item.comment_content }}</text>
			</view>
			<view class="info">
				<view class="reply-btn" @click="openComment" v-if="combtn">
					{{ item.reply_count ? item.reply_count + '回复' : '点我讨论' }}
				</view>
				<view class="time">
					<uni-dateformat :date="item.comment_date" format="yyyy年MM月dd hh:mm"
						:threshold="[60000,3600000*24*30]"></uni-dateformat>
				</view>
				<view class="where">
					{{ item.province }}
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted
	} from "vue";
	const {
		item,
		combtn
	} = defineProps({
		item: Object,
		combtn: Boolean
	})

	const emit = defineEmits(['delcomment', 'opencomment'])

	const db = uniCloud.database()
	const utilsObj = uniCloud.importObject('utilsobj', {
		customUI: true
	})

	const openComment = () => {
		emit('opencomment', item)
	}

	const delComment = () => {
		uni.showModal({
			title: '是否删除该评论!!!',
			success: (res) => {
				if (res.confirm) {
					if (item.comment_type) {
						db.collection('blog-news-comments').doc(item._id).remove().then(res => {
							if (res.result.deleted) {
								uni.showToast({
									title: '删除成功!',
									icon: 'none'
								})
								emit('delcomment', item)
								utilsObj.operation('blog', 'comment_count', `${item.article_id}`, -
										1)
									.then(del => {
										console.log(del);
									})
							}
						})
					} else {
						let delComs = []
						let num = 0
						db.collection('blog-news-comments').where(`reply_comment_id == '${item._id}'`)
							.get()
							.then(res => {
								delComs = res.result.data.map(item => item._id)
								delComs.push(item._id)
								delComs.forEach(async (comment) => {
									const response = await db.collection(
										'blog-news-comments').doc(comment).remove()
									num = num + response.result.deleted
									if (delComs.length === num) {
										uni.showToast({
											title: '删除成功!',
											icon: 'none'
										})
										emit('delcomment', {item,num})
										utilsObj.operation('blog', 'comment_count',
												`${item.article_id}`, -num)
											.then(del => {
												console.log(del);
											})
									}
								})
							})
					}
				}
			}
		})
	}
</script>

<style scoped lang="scss">
	.comment-item {
		width: 100%;
		padding: 20rpx;
		display: flex;
		box-sizing: border-box;
		box-shadow: 0 0 5rpx 5rpx #f8f8f8;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		position: relative;

		.del-btn {
			position: absolute;
			top: 0;
			right: 0;
			padding: 10rpx;

			.iconfont {
				color: #999;
				font-size: 35rpx;
			}
		}

		.wrap {
			display: flex;
			flex-direction: column;
			margin-left: 10rpx;

			.name {
				padding-top: 10rpx;
				font-size: 26rpx;
				color: #999;
				font-weight: 300;
				margin-left: 10rpx;
			}

			.comment-content {
				margin: 10rpx 0;
				font-size: 32rpx;
				margin-left: 10rpx;
			}

			.info {
				display: flex;
				align-items: center;
				color: #999;
				font-size: 26rpx;

				.reply-btn {
					padding: 5rpx 10rpx;
					background-color: #D3D3D3;
					border-radius: 20rpx;
					margin-right: 20rpx;
				}

				.time {
					margin-right: 20rpx;
				}
			}
		}
	}
</style>